<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-30 08:56:17
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-01 22:04:40
 * @FilePath: \guanggu_traffic\src\views\admin\components\UserListtable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-table :data="data" style="width: 100%">
		<el-table-column prop="username" label="用户名" width="180" />
		<el-table-column prop="password" label="密码" width="180" />
		<el-table-column prop="type" label="类型">
			<template #default="scope">
				<el-tag v-show="scope.row.type === 'common'" disable-transitions
					>普通用户</el-tag
				>
				<el-tag v-show="scope.row.type === 'admin'" disable-transitions
					>超级管理员</el-tag
				>
				<el-tag
					v-show="scope.row.type === 'traffic'"
					disable-transitions
					>交通管理员</el-tag
				>
			</template>
		</el-table-column>
		<el-table-column prop="isOnline" label="状态">
			<template #default="scope">
				<el-tag
					:type="scope.row.isOnline === true ? 'success' : 'primary'"
					disable-transitions
					>{{ scope.row.isOnline === true ? '在线' : '离线' }}</el-tag
				>
			</template>
		</el-table-column>
		<!-- 编辑 -->
		<el-table-column label="操作" width="250" class="operation">
			<template #default="scoped">
				<el-button
					type="success"
					size="small"
					@click="handleEdit(scoped.row)"
					>编辑</el-button
				>
                
				<el-button
					v-if="scoped.row.type !== 'admin'"
					type="danger"
					size="small"
					@click="handleDelete(scoped.row)"
					>删除</el-button
				>
				<el-button
					v-if="scoped.row.type !== 'admin' && scoped.row.isOnline"
					type="warning"
					size="small"
					@click="handleReset(scoped.row)"
					>强制下线</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<!-- 编辑用户信息弹窗 -->
	<UserInfoDialog
		v-model="isShowUserEditDialog"
		:isEdit="true"
		:userInfo="userInfo"
		:handleSubmit="handleSubmit"
	></UserInfoDialog>
</template>

<script setup>
import { ref } from 'vue'
import UserInfoDialog from './UserInfoDialog.vue'
import {
	modifyUserInfoHttp,
	deleteUserHttp,
	logoutHttp,
} from '@/request/request'
const props = defineProps({
	data: {
		type: Array,
		default: [],
	},
	syncUserData: {
		type: Function,
		required: true,
	},
})
//删除用户
const handleDelete = (row)=>{
if(confirm('将永久删除用户信息且不可恢复!')){
    deleteUserHttp({username:row.username,
    type:row.type,}).then((res)=>{
        if(res.code ==200){
            ElMessage.success("删除用户成功");
            //同步后台数据
            props.syncUserData()
        }
})
}else{
    ElMessage.success("删除用户取消操作");
}



}
//强制下线用户
const  handleReset = (row)=>{
    console.log(row)
    //发送请求强制下线用户
    logoutHttp({
        username:row.username,
        type:row.type,
    }).then((res)=>{
        if(res.code==200){
            ElMessage.success("下线成功");
            //同步后台数据
            props.syncUserData()
        }
    })
}
//修改用户信息弹窗
const isShowUserEditDialog = ref(false)
const userInfo = ref({
	username: '',
	password: '',
	type: '',
	isOnline: '',
})
const oldType = ref('') //记录旧类型
//编辑用户信息
const handleEdit = (row) => {
	isShowUserEditDialog.value = true
	userInfo.value = {
		username: row.username,
		password: row.password,
		type: row.type,
	}
    //记录旧类型
    oldType.value = row.type;
}
//编辑事件确定回调
const handleSubmit = (form) => {
    //关闭编辑用户窗口
    isShowUserEditDialog.value = false;
    modifyUserInfoHttp({
        username:form.username,
        newPassword:form.password,
        newType:form.type,
        oldType:oldType.value,
    }).then((res)=>{
        if(res.code==200){
            ElMessage.success('编辑用户信息成功!')
            props.syncUserData()//同步后台数据
        }
    })
}
</script>

<style lang="scss" scoped></style>
